<!DOCTYPE HTML>
<html>
	<head>
		<title>nativeDroid II - jQueryMobile Template</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

		<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
		<link rel="stylesheet" href="/vendor/jquerymobile/jquery.mobile.min.css" />
		<link rel="stylesheet" href="/vendor/waves/waves.min.css" />
		<link rel="stylesheet" href="/vendor/wow/animate.css" />
		<link rel="stylesheet" href="/css/nativedroid2.css" />

		<style>
			/* Prevent FOUC */
			body { opacity: 0; }
		</style>

	</head>
	<body>

		<div data-role="page" class="nd2-no-menu-swipe">

			<nd2-include data-src="/examples/fragments/panel.left.html"></nd2-include>

			<div data-role="header" data-position="fixed" class="wow fadeIn">
				<a href="#leftpanel" class="ui-btn ui-btn-left wow fadeIn" data-wow-delay='0.8s'><i class="zmdi zmdi-menu"></i></a>
				<h1 class="wow fadeIn" data-wow-delay='0.4s'>Forms</h1>
			</div>

			<div role="main" class="ui-content wow fadeIn" data-inset="false" data-wow-delay="0.2s">


				<form>


				<div class="row">

					<div class="col-xs-12 col-sm-6 col-md-4">
						<div class="box">

						<fieldset data-role="controlgroup">
                            <legend>Checkboxes</legend>
                            <input type="checkbox" name="checkbox-1a" id="checkbox-1ab" checked="">
                            <label for="checkbox-1ab">Cheetos</label>
                            <input type="checkbox" name="checkbox-2a" id="checkbox-2ab">
                            <label for="checkbox-2ab">Doritos</label>
                            <input type="checkbox" name="checkbox-3a" id="checkbox-3ab">
                            <label for="checkbox-3ab">Fritos</label>
                            <input type="checkbox" name="checkbox-4a" id="checkbox-4ab">
                            <label for="checkbox-4ab">Sun Chips</label>
                        </fieldset>

                        <fieldset data-role="controlgroup"  data-type="horizontal"  data-mini="true">
                            <legend>Checkboxes horizontal</legend>
                            <input type="checkbox" name="checkbox-6" id="checkbox-6b">
                            <label for="checkbox-6b">b</label>
                            <input type="checkbox" name="checkbox-7" id="checkbox-7b" checked="">
                            <label for="checkbox-7b"><em>i</em></label>
                            <input type="checkbox" name="checkbox-8" id="checkbox-8b">
                            <label for="checkbox-8b">u</label>
                        </fieldset>

						<fieldset data-role="controlgroup">
                            <legend>Radio Buttons</legend>
                            <input type="radio" name="radio-choice-1" id="radio-choice-1b" value="choice-1" checked="checked">
                            <label for="radio-choice-1b">Cat</label>
                            <input type="radio" name="radio-choice-1" id="radio-choice-2b" value="choice-2">
                            <label for="radio-choice-2b">Dog</label>
                            <input type="radio" name="radio-choice-1" id="radio-choice-3b" value="choice-3">
                            <label for="radio-choice-3b">Hamster</label>
                            <input type="radio" name="radio-choice-1" id="radio-choice-4b" value="choice-4">
                            <label for="radio-choice-4b">Lizard</label>
                        </fieldset>

						<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
                            <legend>Radio Buttons</legend>
                            <input type="radio" name="radio-choice-a" id="radio-choice-ab" value="choice-a" checked="checked">
                            <label for="radio-choice-ab">Select</label>
                            <input type="radio" name="radio-choice-a" id="radio-choice-bb" value="choice-b">
                            <label for="radio-choice-bb">one</label>
                            <input type="radio" name="radio-choice-a" id="radio-choice-cb" value="choice-c">
                            <label for="radio-choice-cb">thing</label>
                            <input type="radio" name="radio-choice-a" id="radio-choice-db" value="choice-d">
                            <label for="radio-choice-db">here!</label>
                        </fieldset>

                        </div>

                    </div>
					<div class="col-xs-12 col-sm-6 col-md-4">
						<div class="box">

						<label for="name2b">Text Input:</label>
                        <input type="text" name="name2" id="name2b" value="" data-clear-btn="true" placeholder="Type your text here...">

						<label for="inputDate">Input type Date:</label>
                        <input type="date" name="inputDate" id="inputDate" value="" data-clear-btn="true" placeholder="">

                        <label for="inputColor">Input type Color:</label>
                        <input type="color" name="inputColor" id="inputColor" value="" data-clear-btn="true" placeholder="">

						<label for="inputDatetime">Input type datetime:</label>
                        <input type="datetime" name="inputDatetime" id="inputDatetime" value="" data-clear-btn="true" placeholder="">

						<label for="inputEmail">Input type email:</label>
                        <input type="email" name="inputEmail" id="inputEmail" value="" data-clear-btn="true" placeholder="">

                        <label for="inputMonth">Input type month:</label>
                        <input type="month" name="inputMonth" id="inputMonth" value="" data-clear-btn="true" placeholder="">

                        <label for="inputTime">Input type time:</label>
                        <input type="time" name="inputTime" id="inputTime" value="" data-clear-btn="true" placeholder="">

                        <label for="inputUrl">Input type url:</label>
                        <input type="url" name="inputUrl" id="inputUrl" value="" data-clear-btn="true" placeholder="">

                        <label for="inputWeek">Input type week:</label>
                        <input type="week" name="inputWeek" id="inputWeek" value="" data-clear-btn="true" placeholder="">

                        <label for="textarea2b">Textarea:</label>
	                    <textarea cols="40" rows="8" name="textarea2" id="textarea2b" placeholder="This is a textarea"></textarea>


                        </div>

                    </div>
					<div class="col-xs-12 col-sm-6 col-md-4">
						<div class="box">


                        <label for="flip2b">Flip switch:</label>
                        <select name="flip2" id="flip2b" data-role="flipswitch">
                            <option value="off">Off</option>
                            <option value="on">On</option>
                        </select>

                        <label for="slider2b">Slider:</label>
                        <input type="range" name="slider2" id="slider2b" value="0" min="0" max="100" data-highlight="true">

                        <div data-role='rangeslider'>
                            <label for='rangeslider1a'>RangeSlider:</label>
                                <input type='range' name='range1a' id='range1a' min='0' max='100' value='40'>
                            <label for='rangeslider1b'>RangeSlider:</label>
                                <input type='range' name='range1b' id='range1b' min='0' max='100' value='80'>
                        </div>

                        <label for="select-choice-1b" class="select">Select</label>
                        <select name="select-choice-1" id="select-choice-1b" data-native-menu="false">
                            <option value="javascript">JavaScript</option>
                            <option value="css">CSS</option>
                            <option value="html">HTML</option>
                            <option value="csharp">C#</option>
                            <option value="java">Java</option>
                        </select>

                        <label for="select-choice-8b" class="select">Multi-select</label>
                        <select name="select-choice-8" id="select-choice-8b" multiple="multiple" data-icon="grid" data-iconpos="left" data-native-menu="false">
                            <option>Choose a few options:</option>
                            <optgroup label="USPS">
                                <option value="standard" selected="">Standard: 7 day</option>
                                <option value="rush">Rush: 3 days</option>
                                <option value="express">Express: next day</option>
                                <option value="overnight">Overnight</option>
                            </optgroup>
                            <optgroup label="FedEx">
                                <option value="firstOvernight">First Overnight</option>
                                <option value="expressSaver">Express Saver</option>
                                <option value="ground">Ground</option>
                            </optgroup>
                        </select>

                        </div>

                    </div>
				</div>

				</form>


			</div>

		</div>

		<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
		<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
		<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
		<script src="/vendor/waves/waves.min.js"></script>
		<script src="/vendor/wow/wow.min.js"></script>
		<script src="/js/nativedroid2.js"></script>
		<script src="/nd2settings.js"></script>

	</body>
</html>
